﻿<section>
    <h2 data-bind="html:displayName" data-height-grp="layout"></h2>
    <blockquote data-bind="html:description" data-height-grp="layout"></blockquote>
    <h3 data-height-grp="layout">Features</h3>
    <div class="nano has-scrollbar" data-height-relative="layout">
	    <div class="nano-content">
		    <ul data-bind="foreach: features">
		        <li data-bind="html: $data"></li>
		    </ul>
		</div>
	</div>
    <div class="alert alert-success" data-height-grp="layout">
      <h4>Click to check toastr</h4>
        <button data-bind="text: 'success', click: $data.test1" type="button" class="btn btn-default"></button>
	    <button data-bind="text: 'info', click: $data.test2" type="button" class="btn btn-default"></button>
	    <button data-bind="text: 'warning', click: $data.test3" type="button" class="btn btn-default"></button>
	    <button data-bind="text: 'success', click: $data.test4" type="button" class="btn btn-default"></button>
	    <button data-bind="text: 'error', click: $data.test5" type="button" class="btn btn-default"></button>
	    <button data-bind="text: 'popup-1', click: $data.test6" type="button" class="btn btn-default"></button>
	    <button data-bind="text: 'popup-2', click: $data.test7" type="button" class="btn btn-default"></button>
	    <!-- ko actions: { commands: $root.actionsPopup } --><!-- /ko -->
    </div>
</section>